<template>
  <div id="tableList">
    <el-button
      @click="$router.push({path:'/contractOrder'})"
      class="more"
      size="mini"
      type="info"
    >更多</el-button>
    <el-tabs size="small" v-model="activeName">
      <el-tab-pane label="当前持仓" name="first">
        <el-table height="200" :data="list" style="width: 100%">
          <el-table-column prop label="建仓时间" min-width="150">
            <template slot-scope="scope">
              <span>{{scope.row.update_date | timing}}</span>
            </template>
          </el-table-column>
          <el-table-column prop label="交易品种" min-width="150">
            <template slot-scope="scope">
              <!-- <span>{{scope.row.trade_kind_name + '(' + scope.row.trade_kind+ ')'}}</span> -->
              <span>{{scope.row.trade_kind}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="cost" label="合约价值" min-width="100"></el-table-column>
          <el-table-column prop label="方向" min-width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.trade_type == 'sel'">开空</span>
              <span v-if="scope.row.trade_type == 'buy'">开多</span>
            </template>
          </el-table-column>
          <el-table-column prop="volumn" label="手数" min-width="100"></el-table-column>

          <el-table-column prop="open_price" label="建仓价" min-width="100"></el-table-column>
          <el-table-column prop="stop_win_price" label="止盈价" min-width="100"></el-table-column>
          <el-table-column prop="stop_loss_price" label="止损价" min-width="100"></el-table-column>
          <el-table-column prop="stop_loss_price" label="手续费" min-width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.cost * 0.1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop label="实时盈亏" min-width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.trade_type == 'sel'">
                <span
                  v-if="scope.row.trade_kind == 'BTCUSDT'"
                >{{(subFun(scope.row.open_price,BTCUSDT)*scope.row.volumn*10) | pointThree}}</span>
                <span
                  v-if="scope.row.trade_kind == 'ETHUSDT'"
                >{{(subFun(scope.row.open_price,ETHUSDT)*scope.row.volumn*40) | pointThree}}</span>
                <span
                  v-if="scope.row.trade_kind == 'LTCUSDT'"
                >{{(subFun(scope.row.open_price,LTCUSDT)*scope.row.volumn*50) | pointThree}}</span>
                <span
                  v-if="scope.row.trade_kind == 'HS300'"
                >{{(subFun(scope.row.open_price,HS300USDT)*scope.row.volumn*40) | pointThree}}</span>
                <span
                  v-if="scope.row.trade_kind == 'IC500'"
                >{{(subFun(scope.row.open_price,IC500USDT)*scope.row.volumn*40) | pointThree}}</span>
              </span>
              <span v-if="scope.row.trade_type == 'buy'">
                <span
                  v-if="scope.row.trade_kind == 'BTCUSDT'"
                >{{(subFun(BTCUSDT,scope.row.open_price)*scope.row.volumn*10) | pointThree}}</span>
                <span
                  v-if="scope.row.trade_kind == 'ETHUSDT'"
                >{{(subFun(ETHUSDT,scope.row.open_price)*scope.row.volumn*40) | pointThree}}</span>
                <span
                  v-if="scope.row.trade_kind == 'LTCUSDT'"
                >{{(subFun(LTCUSDT,scope.row.open_price)*scope.row.volumn*50) | pointThree}}</span>
                <span
                  v-if="scope.row.trade_kind == 'HS300'"
                >{{(subFun(HS300USDT,scope.row.open_price)*scope.row.volumn*40) | pointThree}}</span>
                <span
                  v-if="scope.row.trade_kind == 'IC500'"
                >{{(subFun(IC500USDT,scope.row.open_price)*scope.row.volumn*40) | pointThree}}</span>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="历史持仓" name="second">
        <el-table height="200" :data="listHis" style="width: 100%">
          <el-table-column prop label="建仓时间" min-width="150">
            <template slot-scope="scope">
              <span>{{scope.row.update_date | timing}}</span>
            </template>
          </el-table-column>
          <el-table-column prop label="交易品种" min-width="150">
            <template slot-scope="scope">
              <!-- <span>{{scope.row.trade_kind_name + '(' + scope.row.trade_kind+ ')'}}</span> -->
              <span>{{scope.row.trade_kind}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="cost" label="合约价值" min-width="100"></el-table-column>
          <el-table-column prop label="方向" min-width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.trade_type == 'sel'">卖出</span>
              <span v-if="scope.row.trade_type == 'buy'">买入</span>
            </template>
          </el-table-column>
          <el-table-column prop="volumn" label="手数" min-width="100"></el-table-column>

          <el-table-column prop="open_price" label="建仓价" min-width="100"></el-table-column>
          <el-table-column prop="stop_win_price" label="止盈价" min-width="100"></el-table-column>
          <el-table-column prop="stop_loss_price" label="止损价" min-width="100"></el-table-column>
          <el-table-column prop="stop_loss_price" label="手续费" min-width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.cost * 0.1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop label="盈亏" min-width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.trade_type == 'buy'">
                <span
                  v-if="scope.row.trade_kind == 'BTCUSDT'"
                >{{(scope.row.close_price - scope.row.open_price)*10 | pointThree}}</span>
                <span
                  v-if="scope.row.trade_kind == 'ETHUSDT'"
                >{{(scope.row.close_price - scope.row.open_price)*40 | pointThree}}</span>
                <span
                  v-if="scope.row.trade_kind == 'LTCUSDT'"
                >{{(scope.row.close_price - scope.row.open_price)*50 | pointThree}}</span>
                <span
                  v-if="scope.row.trade_kind == 'HS300'"
                >{{(scope.row.close_price - scope.row.open_price)*40 | pointThree}}</span>
                <span
                  v-if="scope.row.trade_kind == 'IC500'"
                >{{(scope.row.close_price - scope.row.open_price)*40 | pointThree}}</span>
              </span>
              <span v-if="scope.row.trade_type == 'sel'">
                <span
                  v-if="scope.row.trade_kind == 'BTCUSDT'"
                >{{(scope.row.open_price - scope.row.close_price)*10 | pointThree}}</span>
                <span
                  v-if="scope.row.trade_kind == 'ETHUSDT'"
                >{{(scope.row.open_price - scope.row.close_price)*40 | pointThree}}</span>
                <span
                  v-if="scope.row.trade_kind == 'LTCUSDT'"
                >{{(scope.row.open_price - scope.row.close_price)*50 | pointThree}}</span>
                <span
                  v-if="scope.row.trade_kind == 'HS300'"
                >{{(scope.row.open_price - scope.row.close_price)*40 | pointThree}}</span>
                <span
                  v-if="scope.row.trade_kind == 'IC500'"
                >{{(scope.row.open_price - scope.row.close_price)*40 | pointThree}}</span>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import moment from "moment";
import { tradesPositionGetlist, hisposition } from "../../api/api";
import { mapState } from "Vuex";
export default {
  name: "tableList",
  data() {
    return {
      activeName: "first",
      list: [],
      listHis: []
    };
  },
  computed: {
    ...mapState([
      "user",
      "tableList",
      "product",
      "BTCUSDT",
      "ETHUSDT",
      "LTCUSDT",
      "IC500USDT",
      "HS300USDT"
    ])
  },
  created() {
    if (this.user != null) {
      this.getCc();
      this.getHistory();
    }
  },
  watch: {
    tableList() {
      this.getCc();
      this.getHistory();
    }
  },
  methods: {
    subFun(arg1, arg2) {
      var r1, r2, m, n;
      try {
        r1 = arg1.toString().split(".")[1].length;
      } catch (e) {
        r1 = 0;
      }
      try {
        r2 = arg2.toString().split(".")[1].length;
      } catch (e) {
        r2 = 0;
      }
      m = Math.pow(10, Math.max(r1, r2));
      n = r1 >= r2 ? r1 : r2;
      return ((arg1 * m - arg2 * m) / m).toFixed(n);
    },
    //持仓
    getCc() {
      var params = {
        guid: this.$allId.guid,
        loginId: this.user.Customer.loginId,
        sessionId: this.user.SessionId
      };
      tradesPositionGetlist(params).then(res => {
        this.list = res.data.PositionList.slice(0, 7);
        this.list.reverse()
      });
    },
    //历史
    getHistory() {
      var params = {
        guid: this.$allId.guid,
        loginId: this.user.Customer.loginId,
        sessionId: this.user.SessionId,
        skip: 1,
        pagesize: 10
      };
      hisposition(params).then(res => {
        this.listHis = res.data.PositionList.slice(0, 7);
        this.listHis.reverse()
      });
    }
  },
  filters: {
    dealTypes(val) {
      if (val == "buy") {
        return "买入";
      } else if (val == "sel") {
        return "卖出";
      }
    },
    timing(val) {
      return moment(val).format("YYYY-MM-DD HH:mm:ss");
    },
    pointThree(val) {
      return Number(val).toFixed(2);
    }
  }
};
</script>
<style lang='less' scoped>
@color1: #162235;
@color2: #8b91b1;
@color3: #1b273b;
@line: #1e2b40;
@color4: #111d2d;
@color5: #1a273a;
#tableList {
  padding: 10px;
  box-sizing: border-box;
  position: relative;
  .more {
    position: absolute;
    top: 15px;
    right: 10px;
    z-index: 100;
  }
}
/deep/.el-tabs__nav-scroll {
  background-color: @color5;
}
/deep/.el-tabs__active-bar {
  background-color: @color5;
}
/deep/.el-tabs__nav-wrap::after {
  height: 0;
}
/deep/.el-tabs__item {
  padding: 0 10px;
  line-height: 40px !important;
  height: 40px !important;
  color: @color2 !important;
}
/deep/.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 10px;
}
/deep/.el-tabs__item.is-active {
  color: #409eff !important;
}
// --------------------
/deep/.el-table th > .cell {
  font-size: 10px;
}
/deep/.el-table .cell {
  font-size: 12px;
  color: #484e70;
  padding: 0;
}
/deep/.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
  display: none;
}
/deep/.has-gutter th {
  padding: 1px 0 !important;
}
/deep/.el-table td,
.el-table th {
  padding: 3px 0 !important;
}
/deep/.el-table td,
.el-table th.is-leaf {
  border-bottom: 0;
}
/deep/.el-collapse-item__header {
  height: 35px;
  line-height: 35px;
}
/deep/.el-collapse-item__content {
  padding-bottom: 10px;
}
/deep/.el-collapse-item__header {
  background-color: @color4;
  color: @color2;
  border: 0;
  padding: 0 5px;
  box-sizing: border-box;
}
/deep/.el-collapse-item__content {
  background-color: @color1;
  color: #fff;
  padding: 5px 5px;
  box-sizing: border-box;
}
/deep/.el-collapse-item__wrap,
.el-collapse {
  border: 0;
}
</style>